import { Avatar, Card, List, Tabs } from "antd";
import "./index.less";
import { createApi } from "@/api/bpm/task/create/index";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
const { TabPane } = Tabs;
const { Item } = List;
const index = () => {
	const [nav, setNav] = useState([]);
	const [data, setData] = useState([]);
	const [filterData, setFilterData] = useState([]);
	const navigate = useNavigate();
	const tabsChange = (key: any) => {
		const arr = data.filter((item: any) => (item.category === key ? item : ""));
		setFilterData(arr);
	};
	const createApiCategory = async () => {
		const res = await createApi.category();
		setNav(res);
	};
	// 获取流程定义列表
	const createApiProcessDefinitionList = async () => {
		const res = await createApi.processDefinitionList();
		setData(res);
		const arr = res.filter((item: any) => (item.category === "staff_type" ? item : ""));
		setFilterData(arr);
	};
	const toExamine = (item: any) => () => {
		console.log(item);
		switch (item.name) {
			case "新增人员审核":
				console.log(item.name);
				navigate("/hrms/employee-management");
				break;
			case "请假审核":
				console.log(item.name);
				navigate("/hrms/leave-management");
				break;
			case "退休流程":
				console.log(item.name);
				navigate("/hrms/Retired");
				break;
			default:
				break;
		}
	};
	useEffect(() => {
		createApiProcessDefinitionList();
		createApiCategory();
	}, []);
	return (
		<div className="createProcessInstance">
			{/* <header>
				<Input prefix={<SearchOutlined />} placeholder="请输入流程名字"></Input>
			</header> */}
			<div className="personnelReviewContainer">
				<Tabs defaultActiveKey="1" tabPosition="left" style={{ height: "100%" }} onChange={tabsChange}>
					{nav.map((item: any) => {
						return (
							<TabPane tab={item.name} key={item.code}>
								<div className="personnelReview">
									<h1>{item.name}</h1>
									<List
										grid={{
											gutter: 3,
											xxl: 4
										}}
										dataSource={filterData}
										renderItem={(dataItem: any) => (
											<Item onClick={toExamine(dataItem)}>
												{item.code === dataItem.category && (
													<Card>
														<div className="toExamine">
															<Avatar.Group
																maxCount={2}
																maxPopoverTrigger="click"
																size="large"
																maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf", cursor: "pointer" }}
															>
																<Avatar src={dataItem.icon} />
															</Avatar.Group>
															<p>{dataItem.name}</p>
														</div>
													</Card>
												)}
											</Item>
										)}
									/>
								</div>
							</TabPane>
						);
					})}
				</Tabs>
			</div>
		</div>
	);
};
export default index;
